﻿<!DOCTYPE html>
<html>
<head>
    <title>数据表编辑</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css?v=1">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <!--<link href="/ViewV5/JS/element/index.css" rel="stylesheet" />-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/FORMBI.css?v=2">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_533449_naak7odp5x.css" />

    <style>
        .el-button-group button {
            border-radius: 0px;
        }

        .widthmax {
            width: 100%
        }

        .pd40 {
            padding: 40px;
        }

        .pd0 {
            padding: 0;
        }
    </style>
</head>
<body class="BG">

    <div id="Loading">
        <div class="loader-inner ball-beat">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="DATABI_DSETZZ" class="FormV" style="display:none">
        <el-container>

            <el-main class="elmain pd40">
                <div class="panel-df">
                    <div class="container containerb width840" style="padding:0">
                        <div class="panel panel-defaul  panhead">


                            <el-row>
                                <el-col :xs="24" :sm="24">
                                    <h4 class="text-center" style="font-size:20PX;font-weight:bolder">
                                        <span v-text="FormData.TableDesc+'-'+FormData.TableName"></span>   <i class="el-icon-edit" style="color:#3a8ee6;cursor:pointer" @click="dialogFormVisible = true"></i>
                                    </h4>
                                    <el-dialog title="修改表名称" :visible.sync="dialogFormVisible">
                                        <el-form>
                                            <el-form-item label="表名称">
                                                <el-input v-model="FormData.TableName" autocomplete="off"></el-input>
                                            </el-form-item>

                                        </el-form>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                                            <el-button type="primary" @click="RelTabName">确 定</el-button>
                                        </span>
                                    </el-dialog>
                                </el-col>
                            </el-row>

                        </div>

                        <div class="panel panel-default panbody" style="padding:0" v-loading="loading" element-loading-text="拼命处理中...">
                            <div class="success" v-show="formtatus =='1'">
                                <div class="success-tip">
                                    操作信息提示
                                    <i></i>
                                </div>
                                <div class="icon-tip">
                                    <div class="success-icon">
                                        <img src="/ViewV5/images/xt-right.png" />
                                    </div>
                                    <p></p>
                                </div>

                                <div class="tip-mesg">
                                </div>
                            </div>

                            <el-row class="padding20" v-show="formtatus =='0'">


                                <el-table :data="WDData"
                                          border
                                          style="width: 100%" class="mt10">
                                    <el-table-column label="固定列">

                                        <el-table-column prop="DbColumnName"
                                                         label="列名"
                                                         width="160">
                                        </el-table-column>
                                        <el-table-column prop="ColumnDescription"
                                                         label="注释"
                                                         width="150">
                                        </el-table-column>
                                        <el-table-column prop="DataType"
                                                         label="列类型"
                                                         width="120">
                                        </el-table-column>
                                        <el-table-column prop="Length"
                                                         label="长度"
                                                         width="80">
                                        </el-table-column>


                                        <el-table-column prop="IsPrimarykey" label="是否主键">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.IsPrimarykey" active-value="0" inactive-value="1" disabled>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="IsNullable" label="是否可为空">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.IsNullable" active-value="0" inactive-value="1" disabled>
                                            </template>
                                        </el-table-column>

                                    </el-table-column>

                                </el-table>
                                <el-table :data="WDData1"
                                          border
                                          style="width: 100%" class="mt10">
                                    <el-table-column label="自定义列">
                                        <el-table-column prop="DbColumnName"
                                                         label="列名"
                                                         width="130">
                                            <template slot-scope="scope">
                                                <span v-text="scope.row.DbColumnName"></span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="ColumnDescription"
                                                         label="列注释"
                                                         width="130">
                                            <template slot-scope="scope">
                                                <span v-text="scope.row.ColumnDescription"></span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column prop="DataType"
                                                         label="列类型"
                                                         width="100">
                                            <template slot-scope="scope">
                                                <span v-text="scope.row.DataType"></span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="Length"
                                                         label="长度"
                                                         width="80">
                                            <template slot-scope="scope">
                                                <span v-text="scope.row.Length"></span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="DecimalDigits"
                                                         label="小数位"
                                                         width="80">
                                            <template slot-scope="scope">
                                                <span v-text="scope.row.DecimalDigits"></span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="IsNullable" label="是否可为空">
                                            <template slot-scope="scope">
                                                <el-switch v-model="scope.row.IsNullable" active-value="0" inactive-value="1" disabled>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button type="text" @click="EditCol(scope.row)" style="border-radius:0px;"> <span>编辑</span></el-button>
                                                <el-button type="text" @click="DelCol(scope.row,scope.$index)" style="border-radius:0px;color:red"> <span>删除</span></el-button>
                                            </template>
                                        </el-table-column>

                                    </el-table-column>

                                </el-table>

                                <el-dialog title="管理列" :visible.sync="dialogColVisible">
                                    <el-form>
                                        <el-form-item label="列名称">
                                            <el-input v-model="selcol.DbColumnName" autocomplete="off"></el-input>
                                        </el-form-item>
                                        <el-form-item label="注释">
                                            <el-input v-model="selcol.ColumnDescription" autocomplete="off"></el-input>
                                        </el-form-item>

                                        <el-form-item label="类型">
                                            <el-select v-model="selcol.DataType" placeholder="请选择列类型" style="width:100%">
                                                <el-option label="字符型(varchar)" value="varchar"></el-option>
                                                <el-option label="整型(int)" value="int"></el-option>
                                                <el-option label="时间型(datetime)" value="datetime"></el-option>
                                                <el-option label="小数(decimal)" value="decimal"></el-option>
                                                <!--<el-option label="文本(text)" value="text"></el-option>-->

                                            </el-select>

                                        </el-form-item>
                                        <el-form-item label="长度">
                                            <el-select v-model="selcol.Length" placeholder="请选择长度" style="width:100%">
                                                <el-option label="10" value="10"></el-option>
                                                <el-option label="50" value="50"></el-option>
                                                <el-option label="500" value="500"></el-option>
                                                <el-option label="4000" value="4000"></el-option>
                                                <el-option label="8000" value="8000"></el-option>
                                                <el-option label="MAX" value="-1"></el-option>

                                            </el-select>
                                        </el-form-item>

                                        <el-form-item label="小数点" v-show="selcol.DataType=='decimal'">
                                            <el-input-number v-model="selcol.DecimalDigits" :min="0" :max="10" label="小数点"></el-input-number>
                                        </el-form-item>

                                        <el-form-item label="可否为NULL" style="width:200px">
                                            <el-switch v-model="selcol.IsNullable" active-value="0" inactive-value="1" style="width:100%">
                                        </el-form-item>

                                    </el-form>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogColVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="AddCol">确 定</el-button>
                                    </span>
                                </el-dialog>

                                <el-button type="primary" @click="ShowCol" style="border-radius:0px;margin-top:10PX" size="mini"> <i class="iconfont icon-faqi"></i><span>添加列</span></el-button>

                            </el-row>

                        </div>

                    </div>
                </div>
            </el-main>



        </el-container>

    </div>
    <script src="/ViewV5/JS/vue.js"></script>
    <script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/JS/lodash.min.js"></script>
    <script src="/ViewV5/JS/httpVueLoader.js"></script>
    <script src="/ViewV5/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/ViewV5/JS/bijs.js?v=4"></script>
    <script>
        var app = new Vue({
            el: '#DATABI_DSETZZ',

            data: {
                loading: true,
                formtatus: "0",
                isshow: "1",
                selcol: { DataType: "varchar" },
                dialogFormVisible: false,
                dialogColVisible: false,
                dsetid: ComFunJS.getQueryString('ID', '0'),
                WDData: [],
                WDData1: [],
                FormData: {

                }

            },

            methods: {

                DelCol: function (row, index) {
                    app.$confirm('危险操作,确认要删除该字段?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.getJSON("/api/Bll/ExeAction?Action=DATABI_DELCOL", { P1: row.ID }, function (result) {
                            if (!result.ErrorMsg) {
                                app.WDData1.splice(index, 1);
                                app.$notify({
                                    title: '成功',
                                    message: '操作成功',
                                    type: 'success'
                                });
                            }
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                ShowCol: function () {
                    app.selcol = { ID: "0", TableID: app.FormData.ID, TableName: "qj_" + app.FormData.TableName, DecimalDigits: 0, DataType: "varchar", IsPrimarykey: "1", IsNullable: "0", Length: "50", IsIdentity: "1", isPkey: "1", IsIdentity: "1", ColumnDescription: "" };
                    app.dialogColVisible = true;
                },
                EditCol: function (item) {
                    item.Length = item.Length + "";
                    app.selcol = item;
                    app.dialogColVisible = true;
                },
                RelTabName: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=DATABI_RETABNAME", { P1: app.dsetid, P2: app.FormData.TableName }, function (result) {
                        if (!result.ErrorMsg) {
                            app.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            location.reload();
                        }
                    });
                },
                AddCol: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=DATABI_UPBDCOLDATA", { P1: JSON.stringify(app.selcol), P2: app.dsetid }, function (result) {
                        if (!result.ErrorMsg) {
                            app.$notify({
                                title: '成功',
                                message: '操作成功',
                                type: 'success'
                            });
                            if (app.selcol.ID == "0") {
                                app.WDData1.push(result.Result);
                            }
                            app.dialogColVisible = false;
                        }
                    });
                },
                InitData: function () {
                    $.getJSON("/api/Bll/ExeAction?Action=DATABI_GETTABLEDATA", { P1: app.dsetid }, function (result) {
                        if (result.ErrorMsg == "") {
                            app.loading = false;
                            app.FormData = result.Result;
                            app.WDData = result.Result1;
                            app.WDData1 = result.Result2;


                        }
                    })
                }

            },
            mounted: function () {
                var pro = this;
                pro.$nextTick(function () {
                    pro.InitData();

                })
            },
            created() {
                document.body.removeChild(document.getElementById('Loading'))

                var divBJ = document.getElementById('DATABI_DSETZZ');
                divBJ.style.display = "block";
            },
            watch: {
                "selcol.DataType": { //深度监听，可监听到对象、数组的变化
                    handler(newV, oldV) {
                        if (newV == "int" || newV == "decimal") {
                            app.selcol.Length = 10;
                        }
                        if (newV == "datetime") {
                            app.selcol.Length = 0;
                        }
                        if (newV == "text") {
                            app.selcol.Length = 0;
                        }
                        if (newV != "decimal") {
                            app.DecimalDigits = 0;
                        }
                    },
                    deep: true
                }
            }

        })


    </script>

</body>

</html>